<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>
    用户名： <input type="text" formControlName="username" [class.hasError]="formModel.get('username').invalid && formModel.get('username').touched">
  </div>
  <div [hidden]="formModel.get('username').valid || formModel.get('username').untouched">
    <div [hidden]="!formModel.hasError('required','username')" style="color: red">用户名是必填项</div>
    <div [hidden]="!formModel.hasError('minlength','username')" style="color: blue">最小长度是6</div>
  </div>
  <div>
    手机号： <input type="number" formControlName="mobile" >
  </div>
  <div [hidden]="formModel.get('mobile').valid || formModel.get('mobile').pristine">
    <div [hidden]="!formModel.hasError('mobile','mobile')" style="color: red">请输入正确的手机号</div>
  </div>
  <div [hidden]="!formModel.get('mobile').pending">正在验证手机号的合法性...</div>
  <div formGroupName="passwordsGroup">
    <div>
      密码： <input type="password" formControlName="password" >
    </div>
    <div [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])" style="color: blue">最小长度是6</div>
    <!--注意这个密码的第二个参数的写法。套嵌的，所有写成一个数组。  -->
    <div>
      确认密码： <input type="password" formControlName="pconfirm" >
    </div>
  </div>
  <div [hidden]="!formModel.hasError('equal','passwordsGroup')" style="color: red">{{formModel.getError('equal','passwordsGroup')?.descxx}}</div>
  <!--注意这里面的插值表达式，这是结合前面自定义校验器中的返回值，来写的变量里的信息。  -->
  <button type="submit">注册</button>
</form>
<div>
  {{formModel.status}}
  <!--这个好像有三个值，表示表单的三个状态。  -->
</div>
